<template>
  <div class="threeD_Edit">
    <div class="left">
      <div class="layer">
        <div class="title">
          图层
        </div>
        <a-tree
            :data="layerList"
            default-expand-all
            v-model:selected-keys="defaultData.layerKey"
            :fieldNames="{
              key:'uuid',
              title:'name',
              children:'children'
            }"
            @select="HandleSelectElement"
        >

        </a-tree>
      </div>
      <div class="element">
        <div class="title">
          图库
        </div>
        <a-input-search v-model="defaultData.searchKey" class="search"/>
        <a-tree
            :data="treeData"
            @select="HandleSelectTree"
            blockNode
        >
          <template #title="nodeData">
            <template v-if="defaultData.index = GetMatchIndex(nodeData?.title), defaultData.index < 0">
              {{ nodeData?.title }}
            </template>
            <div v-else>
              {{ nodeData?.title?.substr(0, defaultData.index) }}
              <div style="color: var(--color-primary-light-4);">
                {{ nodeData?.title?.substr(defaultData.index, defaultData.searchKey.length) }}
              </div>
              {{ nodeData?.title?.substr(defaultData.index + defaultData.searchKey.length) }}
            </div>
          </template>
        </a-tree>
      </div>
    </div>
    <div class="content">
      <ThreeD ref="threeD"/>
    </div>
    <div class="right">
      <div class="title">
        操作
      </div>
      <SystemSettings class="settings" v-if="defaultData.isSystem"/>
      <ModelingSettings class="settings" v-else/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ThreeD from './ThreeD.vue'
import {reactive, h, computed, ref, watch} from "vue";
import {IconDriveFile} from "@arco-design/web-vue/es/icon";
import SystemSettings from "../components/SystemSettings.vue";
import ModelingSettings from "../components/ModelingSettings.vue";
import {useThreeDimensional} from "../../../storage/models/threeDimensional"

const threeDStore = useThreeDimensional();
const originTreeData = [
  {
    title: "基础几何",
    key: "geometry",
    children: [
      {
        title: "四边体",
        key: "boxGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "圆形",
        key: "circleGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "圆锥体",
        key: "coneGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "圆柱体",
        key: "cylinderGeometry",
        icon: () => h(IconDriveFile)
      },
      // {
      //   title: "十二面体",
      //   key: "dodecahedronGeometry",
      //   icon: () => h(IconDriveFile)
      // },
      {
        title: "球几何体",
        key: "sphereGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "圆环几何体",
        key: "torusGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "圆环扭结几何体",
        key: "torusKnotGeometry",
        icon: () => h(IconDriveFile)
      },
      {
        title: "平面几何体",
        key: "planeGeometry",
        icon: () => h(IconDriveFile)
      }
    ]
  }
]

const threeD = ref();
const defaultData = reactive({
  drag: false,
  layerList: [],
  searchKey: "",
  index: 0,
  layerKey: [''],
  isSystem: true,
})

const layerList = computed(() => {
  // @ts-ignore
  defaultData.layerKey = [object3DData.value['uuid']]
  return threeDStore.layerList
})
const object3DData = computed(() => {
  return threeDStore.element
})


const treeData = computed(() => {
  if (!defaultData.searchKey) return originTreeData;
  return SearchData(defaultData.searchKey);
});

const SearchData = (keyword: string) => {
  const loop = (data: any): Array<any> => {
    const result: any[] = [];
    data.forEach((item: any) => {
      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({...item});
      } else if (item.children) {
        const filterData = loop(item.children);
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData
          })
        }
      }
    })
    return result;

  }
  return loop(originTreeData);
}

const GetMatchIndex = (title: string) => {
  if (!defaultData.searchKey) return -1;
  return title.toLowerCase().indexOf(defaultData.searchKey.toLowerCase())
}

const HandleSelectTree = (key: Array<string | number>, data: any) => {
  threeD.value.AddGeometry(key)
  defaultData.isSystem = false;
}
const HandleSelectElement = (keys: Array<string | number>, data: any) => {
  // @ts-ignore
  const layerList = threeDStore.layerList[1].children
  const key: string | number = keys[0];

  for(let i = 0; i < layerList.length;i++){
    let item = layerList[i];
    if (key === item['uuid']) {
      threeD.value.GetObject3D(item);
      return false;
    }
  }
}

</script>
<style lang="less" scoped>
.threeD_Edit {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;

  > .left {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    > .layer {
      width: 100%;
      height: calc(100% - 10px);
    }

    > .element {
      width: 100%;
      height: calc(100% - 10px);

      > .search {
        margin: 10px 0;
      }
    }
  }

  > .content {
    width: calc(100% - 500px);
    height: 100%;
  }

  > .right {
    width: 300px;
    height: 100%;

    > .settings {
      width: 100%;
      height: calc(100% - 36px);
    }
  }

  .title {
    background-color: #2d343c;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    font-weight: bold;
    letter-spacing: 6px;
  }
}
</style>
